{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '常用插件:example/plugin/index', '标签插件'])}
<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">

          <p>本来找到一个bootstrap-tagsinput的插件，可以很久没有更新了，还是基于2.3的版本，只能放弃。</p>
          <p>插件使用jquery-tagsinput 1.3.6，github地址：<a href="https://github.com/xoxco/jQuery-Tags-Input" target="_blank">https://github.com/xoxco/jQuery-Tags-Input</a></p>
          <p>可以用 <code>data-height</code> 设置输入框的高度，默认是100px，这里示例初始化默认为100%，方便输入更多的值。</p>
          <input class="form-control js-tags-input" type="text" id="example-tags" name="tags" placeholder="请输入标签" value="光年,笔下光年">
          <pre class="mt-3">$(selector).tagsInput({
   'autocomplete_url': url_to_autocomplete_api,
   'autocomplete': { option: value, option: value},
   'height':'100px',
   'width':'300px',
   'interactive':true,
   'defaultText':'add a tag',
   'onAddTag':callback_function,
   'onRemoveTag':callback_function,
   'onChange' : callback_function,
   'delimiter': [',',';'],   // Or a string with a single delimiter. Ex: ';'
   'removeWithBackspace' : true,
   'minChars' : 0,
   'maxChars' : 0, // if not provided there is no limit
   'placeholderColor' : '#666666'
});</pre>

        </div>
      </div>
    </div>

  </div>

  <script type="text/javascript">
    $(function (){
        $('.js-tags-input').each(function() {
        var $this = $(this);
        $this.tagsInput({
            height: $this.data('height') ? $this.data('height') : '100%',
            width: '100%',
            defaultText: $this.attr("placeholder"),
            removeWithBackspace: true,
            delimiter: [',']
        });
    });
    })
    </script>